<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '创建计划',
  },
}
</route>

<script lang="ts" setup>
import type { ReadingPlanCreateReqVO } from '@/api/types/plan'
import { onLoad } from '@dcloudio/uni-app'
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { createReadingPlan } from '@/api/plan'

// 表单数据
const planForm = ref({
  planName: '',
  planType: 'collection', // 'collection' | 'custom'
  dailyCount: 1, // 每天学习数量
  reviewSchedule: 'none', // 复习策略
  cover: '', // 计划封面
})

// 表单验证状态
const formErrors = ref({
  planName: '',
  bookSets: '',
})

// 页面状态
const isSubmitting = ref(false)
const showHelpTips = ref(false)

// 复习策略选项
const reviewOptions = [
  { value: 'none', label: '不复习' },
  { value: 'once', label: '1次（第2天）' },
  { value: 'twice', label: '2次（第2, 5天）' },
  { value: 'three', label: '3次（第2, 5, 8天）' },
  { value: 'four', label: '4次（第2, 5, 8, 16天）' },
  { value: 'five', label: '5次（第2, 5, 8, 16, 31天）' },
]

// 已选择的绘本集
const selectedBookSets = ref<any[]>([])

// 计算属性
const totalBooks = computed(() => {
  return selectedBookSets.value.reduce((total, set) => total + set.bookCount, 0)
})

const estimatedDays = computed(() => {
  return calculateEstimatedDays(totalBooks.value, planForm.value.dailyCount, planForm.value.reviewSchedule)
})

const canSave = computed(() => {
  return planForm.value.planName.trim() && selectedBookSets.value.length > 0
})

// 获取复习策略文本
function getReviewText(value: string) {
  const option = reviewOptions.find(opt => opt.value === value)
  return option ? option.label : '不复习'
}

// 移除绘本集
function removeBookSet(index: number) {
  uni.showModal({
    title: '确认移除',
    content: `确定要移除"${selectedBookSets.value[index].title}"吗？`,
    success: (res) => {
      if (res.confirm) {
        selectedBookSets.value.splice(index, 1)
        validateBookSets()
        // 重新设置计划封面
        updatePlanCover()
      }
    },
  })
}

// 上移绘本集
function moveBookSetUp(index: number) {
  if (index > 0) {
    const temp = selectedBookSets.value[index]
    selectedBookSets.value[index] = selectedBookSets.value[index - 1]
    selectedBookSets.value[index - 1] = temp
    // 重新设置计划封面（如果移动的是第一个）
    if (index === 1) {
      updatePlanCover()
    }
  }
}

// 下移绘本集
function moveBookSetDown(index: number) {
  if (index < selectedBookSets.value.length - 1) {
    const temp = selectedBookSets.value[index]
    selectedBookSets.value[index] = selectedBookSets.value[index + 1]
    selectedBookSets.value[index + 1] = temp
    // 重新设置计划封面（如果移动的是第一个）
    if (index === 0) {
      updatePlanCover()
    }
  }
}

// 获取复习策略中的最大间隔天数
function getMaxReviewOffset(reviewSchedule: string): number {
  // 与后端保持一致的复习策略定义
  const reviewOffsets: { [key: string]: number[] } = {
    none: [], // 不复习
    once: [2],
    twice: [2, 5],
    three: [2, 5, 8],
    four: [2, 5, 8, 16],
    five: [2, 5, 8, 16, 31],
  }

  const offsets = reviewOffsets[reviewSchedule] || []
  return offsets.length > 0 ? Math.max(...offsets) : 0
}

// 计算预计完成天数（包含新学+复习）
function calculateEstimatedDays(totalBooks: number, dailyCount: number, reviewSchedule: string): number {
  if (totalBooks === 0)
    return 0

  // 1. 计算新学习需要的天数
  const newLearningDays = Math.ceil(totalBooks / dailyCount)

  // 2. 获取复习策略中的最大间隔天数
  const maxReviewOffset = getMaxReviewOffset(reviewSchedule)

  // 3. 总天数 = 新学习的最后一天 + 最大复习间隔天数
  return newLearningDays + maxReviewOffset
}

// 获取系统提示文本
function getSystemTips() {
  const dailyCount = planForm.value.dailyCount
  const reviewText = getReviewText(planForm.value.reviewSchedule)
  const totalBooks = selectedBookSets.value.reduce((sum, set) => sum + set.bookCount, 0)
  const estimatedDays = calculateEstimatedDays(totalBooks, dailyCount, planForm.value.reviewSchedule)

  let tips = `【学习安排】每天学习${dailyCount}个新绘本，${reviewText}。`

  // 计划类型说明
  if (planForm.value.planType === 'custom') {
    tips += `\n\n【自定义计划】您可以自由调整绘本集的学习顺序，系统将按照您设定的顺序生成学习任务。`
  }
  else {
    tips += `\n\n【绘本集计划】系统将按照绘本集的默认顺序安排学习任务。`
  }

  if (totalBooks > 0) {
    const newLearningDays = Math.ceil(totalBooks / dailyCount)
    const maxReviewOffset = getMaxReviewOffset(planForm.value.reviewSchedule)

    if (maxReviewOffset > 0) {
      tips += `\n\n【计划预估】您选择了${selectedBookSets.value.length}个绘本集，共${totalBooks}本绘本，新学习需要${newLearningDays}天，加上复习时间，预计总共需要${estimatedDays}天完成。`
    }
    else {
      tips += `\n\n【计划预估】您选择了${selectedBookSets.value.length}个绘本集，共${totalBooks}本绘本，预计需要${estimatedDays}天完成。`
    }

    // 自定义计划的学习顺序提示
    if (planForm.value.planType === 'custom' && selectedBookSets.value.length > 1) {
      tips += `\n\n【学习顺序】`
      selectedBookSets.value.forEach((bookSet, index) => {
        tips += `\n${index + 1}. ${bookSet.title}（${bookSet.bookCount}本）`
      })
    }
  }
  else {
    tips += `\n\n【提示】请先添加绘本集以查看详细计划信息。`
  }

  tips += `\n\n【科学建议】根据艾宾浩斯遗忘曲线，科学安排复习可以提高记忆效果。建议选择至少2次复习以获得更好的学习效果。`

  if (planForm.value.dailyCount > 3) {
    tips += `\n\n【温馨提示】您设置了每天学习${dailyCount}本新绘本，对于年龄较小的孩子可能有些多，建议根据孩子的实际情况调整。`
  }

  return tips
}

// 选择计划类型
function selectPlanType(type: string) {
  planForm.value.planType = type
}

// 增加每日数量
function increaseDailyCount() {
  if (planForm.value.dailyCount < 10) {
    planForm.value.dailyCount++
  }
}

// 减少每日数量
function decreaseDailyCount() {
  if (planForm.value.dailyCount > 1) {
    planForm.value.dailyCount--
  }
}

onMounted(() => {
  // 监听页面返回事件，获取选择的绘本集
  uni.$on('bookSetsSelected', (bookSets: any[]) => {
    selectedBookSets.value = bookSets
    // 自动设置计划封面为第一个绘本集的封面
    updatePlanCover()
  })

  // 初始化时检查是否需要设置封面
  updatePlanCover()
})

// 页面卸载时移除监听
onUnmounted(() => {
  uni.$off('bookSetsSelected')
})

// 显示复习策略选择器
function showReviewSelector() {
  uni.showActionSheet({
    itemList: reviewOptions.map(opt => opt.label),
    success: (res) => {
      planForm.value.reviewSchedule = reviewOptions[res.tapIndex].value
    },
  })
}

// 跳转到绘本集选择页面
function goToSelectBookSets() {
  uni.navigateTo({
    url: `/pages-sub/plan/select-book-sets/index?selected=${JSON.stringify(selectedBookSets.value.map(s => s.id))}`,
  })
}

// 更新计划封面
function updatePlanCover() {
  console.log('更新计划封面，当前选择的绘本集数量:', selectedBookSets.value.length)

  if (selectedBookSets.value.length > 0) {
    // 使用第一个绘本集的封面作为计划封面
    const firstBookSet = selectedBookSets.value[0]
    console.log('第一个绘本集:', firstBookSet)

    if (firstBookSet && firstBookSet.cover) {
      planForm.value.cover = firstBookSet.cover
      console.log('计划封面已设置为:', planForm.value.cover)
    }
    else {
      console.log('第一个绘本集没有封面')
      planForm.value.cover = ''
    }
  }
  else {
    // 如果没有选择绘本集，清空封面
    console.log('没有选择绘本集，清空封面')
    planForm.value.cover = ''
  }
}

// 验证计划名称
function validatePlanName() {
  const name = planForm.value.planName.trim()

  if (!name) {
    formErrors.value.planName = '请输入计划名称'
    return false
  }

  if (name.length < 2) {
    formErrors.value.planName = '计划名称至少需要2个字符'
    return false
  }

  if (name.length > 20) {
    formErrors.value.planName = '计划名称不能超过20个字符'
    return false
  }

  formErrors.value.planName = ''
  return true
}

// 验证绘本集
function validateBookSets() {
  if (selectedBookSets.value.length === 0) {
    formErrors.value.bookSets = '请至少选择一个绘本集'
    return false
  }

  formErrors.value.bookSets = ''
  return true
}

// 验证整个表单
function validateForm() {
  const nameValid = validatePlanName()
  const bookSetsValid = validateBookSets()

  return nameValid && bookSetsValid
}

// 重置表单
function resetForm() {
  uni.showModal({
    title: '确认重置',
    content: '确定要重置所有已填写的内容吗？',
    success: (res) => {
      if (res.confirm) {
        planForm.value = {
          planName: '',
          planType: 'collection',
          dailyCount: 1,
          reviewSchedule: 'none',
          cover: '',
        }
        selectedBookSets.value = []
        formErrors.value = { planName: '', bookSets: '' }
        // 重置封面
        updatePlanCover()
        uni.showToast({
          title: '表单已重置',
          icon: 'none',
        })
      }
    },
  })
}

// 保存并预览
async function saveAndPreview() {
  // 表单验证
  if (!validateForm()) {
    uni.showToast({
      title: '请完善表单信息',
      icon: 'none',
    })
    return
  }

  // 构建提交数据
  const reviewSchedule = getReviewScheduleArray(planForm.value.reviewSchedule)
  console.log('复习策略:', planForm.value.reviewSchedule, '转换为数组:', reviewSchedule)

  const planData: ReadingPlanCreateReqVO = {
    planName: planForm.value.planName.trim(),
    planType: planForm.value.planType,
    cover: planForm.value.cover,
    dailyCount: planForm.value.dailyCount,
    reviewSchedule,
    collectionIds: selectedBookSets.value.map(s => s.id),
  }

  console.log('提交数据:', planData)

  try {
    isSubmitting.value = true
    uni.showLoading({ title: '创建中...' })

    const response = await createReadingPlan(planData)

    if (response && response.code === 0) {
      uni.showToast({
        title: '计划创建成功',
        icon: 'success',
        duration: 2000,
      })

      // 发送计划变更事件，通知首页更新数据
      uni.$emit('planChanged')

      // 跳转到计划详情页
      setTimeout(() => {
        uni.navigateTo({
          url: `/pages-sub/plan/plan-detail/index?planId=${response.data}`,
        })
      }, 1500)
    }
    else {
      throw new Error(response?.msg || '创建失败')
    }
  }
  catch (error: any) {
    console.error('创建计划失败:', error)

    // 提取错误信息
    let errorMsg = '创建失败，请重试'
    if (error.message) {
      // 处理常见错误
      if (error.message.includes('复习策略')) {
        errorMsg = '复习策略设置有误，请重新选择'
      }
      else if (error.message.includes('绘本集')) {
        errorMsg = '绘本集选择有误，请重新选择'
        formErrors.value.bookSets = '请选择有效的绘本集'
      }
      else {
        errorMsg = error.message
      }
    }

    uni.showModal({
      title: '创建失败',
      content: errorMsg,
      showCancel: false,
    })
  }
  finally {
    uni.hideLoading()
    isSubmitting.value = false
  }
}

// 获取复习策略数组
function getReviewScheduleArray(schedule: string): string[] {
  const scheduleMap: { [key: string]: string[] } = {
    none: ['0'], // 不复习用"0"表示，避免空数组验证错误
    once: ['2'],
    twice: ['2', '5'],
    three: ['2', '5', '8'],
    four: ['2', '5', '8', '16'],
    five: ['2', '5', '8', '16', '31'],
  }
  return scheduleMap[schedule] || ['0']
}

onLoad(() => {
  console.log('创建计划页面加载完成')
})
</script>

<template>
  <view class="create-plan">
    <!-- 表单内容 -->
    <view class="form-content">
      <!-- 计划名称 -->
      <view class="form-group">
        <text class="form-label">
          计划名称 <text class="required">
            *
          </text>
        </text>
        <input
          v-model="planForm.planName"
          class="form-input"
          :class="{ error: formErrors.planName }"
          placeholder="请输入计划名称（2-20字符）"
          maxlength="20"
          @input="validatePlanName"
          @blur="validatePlanName"
        >
        <text v-if="formErrors.planName" class="error-text">
          {{ formErrors.planName }}
        </text>
        <text class="char-count">
          {{ planForm.planName.length }}/20
        </text>
      </view>

      <!-- 计划封面预览 -->
      <view v-if="planForm.cover" class="form-group">
        <text class="form-label">
          计划封面
        </text>
        <view class="cover-preview">
          <image class="cover-image" :src="planForm.cover" mode="aspectFill" />
          <text class="cover-tip">
            自动使用第一个绘本集的封面
          </text>
        </view>
      </view>

      <!-- 计划类型 -->
      <view class="form-group">
        <text class="form-label">
          计划类型
        </text>
        <view class="radio-group">
          <view
            class="radio-item"
            :class="{ active: planForm.planType === 'collection' }"
            @click="selectPlanType('collection')"
          >
            <view class="radio-circle">
              <view v-if="planForm.planType === 'collection'" class="radio-dot" />
            </view>
            <view class="radio-content">
              <text class="radio-text">
                绘本集计划
              </text>
              <text class="radio-desc">
                按默认顺序学习
              </text>
            </view>
          </view>
          <view
            class="radio-item"
            :class="{ active: planForm.planType === 'custom' }"
            @click="selectPlanType('custom')"
          >
            <view class="radio-circle">
              <view v-if="planForm.planType === 'custom'" class="radio-dot" />
            </view>
            <view class="radio-content">
              <text class="radio-text">
                自定义计划
              </text>
              <text class="radio-desc">
                可调整学习顺序
              </text>
            </view>
          </view>
        </view>
      </view>

      <!-- 每天学几个新的 -->
      <view class="form-group">
        <text class="form-label">
          每天学几个新的
        </text>
        <view class="stepper-container">
          <view class="stepper-btn" @click="decreaseDailyCount">
            <text class="stepper-text">
              -
            </text>
          </view>
          <text class="stepper-value">
            {{ planForm.dailyCount }}
          </text>
          <view class="stepper-btn" @click="increaseDailyCount">
            <text class="stepper-text">
              +
            </text>
          </view>
        </view>
      </view>

      <!-- 复习次数 -->
      <view class="form-group">
        <text class="form-label">
          复习次数
        </text>
        <view class="dropdown-container" @click="showReviewSelector">
          <text class="dropdown-text">
            {{ getReviewText(planForm.reviewSchedule) }}
          </text>
          <text class="dropdown-arrow">
            ▼
          </text>
        </view>
      </view>

      <!-- 绘本集 -->
      <view class="form-group">
        <text class="form-label">
          绘本集 <text class="required">
            *
          </text>
        </text>
        <button
          class="add-bookset-btn"
          :class="{ error: formErrors.bookSets }"
          @click="goToSelectBookSets"
        >
          <text class="btn-icon">
            +
          </text>
          {{ selectedBookSets.length > 0 ? `已选择${selectedBookSets.length}个绘本集` : '添加绘本集' }}
        </button>
        <text v-if="formErrors.bookSets" class="error-text">
          {{ formErrors.bookSets }}
        </text>

        <!-- 已选绘本集列表 -->
        <view v-if="selectedBookSets.length > 0" class="selected-booksets">
          <!-- 自定义计划提示 -->
          <view v-if="planForm.planType === 'custom'" class="custom-plan-tip">
            <text class="tip-text">
              💡 自定义计划：可调整绘本集学习顺序
            </text>
          </view>

          <view
            v-for="(bookSet, index) in selectedBookSets"
            :key="bookSet.id"
            class="bookset-item"
            :class="{ 'custom-item': planForm.planType === 'custom' }"
          >
            <image class="bookset-cover" :src="bookSet.cover" mode="aspectFill" />
            <view class="bookset-info">
              <text class="bookset-title">
                {{ bookSet.title }}
              </text>
              <text class="bookset-count">
                {{ bookSet.bookCount }}本
              </text>
              <view v-if="planForm.planType === 'custom'" class="order-info">
                <text class="order-text">
                  第{{ index + 1 }}个学习
                </text>
              </view>
            </view>

            <!-- 自定义计划的排序控制按钮 -->
            <view v-if="planForm.planType === 'custom'" class="sort-controls">
              <view
                class="sort-btn"
                :class="{ disabled: index === 0 }"
                @click.stop="moveBookSetUp(index)"
              >
                <text class="sort-icon">
                  ↑
                </text>
              </view>
              <view
                class="sort-btn"
                :class="{ disabled: index === selectedBookSets.length - 1 }"
                @click.stop="moveBookSetDown(index)"
              >
                <text class="sort-icon">
                  ↓
                </text>
              </view>
            </view>

            <text class="remove-btn" @click.stop="removeBookSet(index)">
              ×
            </text>
          </view>
        </view>
      </view>

      <!-- 系统说明 -->
      <view class="system-tips">
        <view class="tips-header" @click="showHelpTips = !showHelpTips">
          <text class="tips-title">
            计划说明
          </text>
          <text class="tips-toggle">
            {{ showHelpTips ? '收起' : '展开' }}
          </text>
        </view>
        <view v-if="showHelpTips" class="tips-content">
          <text class="tips-text">
            {{ getSystemTips() }}
          </text>
        </view>
      </view>
    </view>

    <!-- 底部按钮区域 -->
    <view class="bottom-action">
      <button
        class="reset-btn"
        @click="resetForm"
      >
        重置
      </button>
      <button
        class="save-preview-btn"
        :class="{ disabled: !canSave }"
        :loading="isSubmitting"
        @click="saveAndPreview"
      >
        {{ isSubmitting ? '创建中...' : '保存并预览' }}
      </button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.create-plan {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 100px; // 为底部按钮留空间
}

/* 表单内容 */
.form-content {
  padding: 20px 20px 0;
}

/* 表单组 */
.form-group {
  margin-bottom: 30px;

  .form-label {
    display: block;
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 500;

    .required {
      color: #ff4d4f;
      margin-left: 4px;
    }
  }

  .form-input {
    width: 90%;
    height: 50px;
    background-color: #f8f8f8;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0 15px;
    font-size: 16px;
    color: #333;
    transition: all 0.3s;

    &::placeholder {
      color: #999;
    }

    &:focus {
      border-color: #4080ff;
      background-color: #fff;
      box-shadow: 0 0 0 2px rgba(64, 128, 255, 0.2);
    }

    &.error {
      border-color: #ff4d4f;
      background-color: #fff1f0;
    }
  }

  .error-text {
    color: #ff4d4f;
    font-size: 12px;
    margin-top: 8px;
    display: block;
  }

  .char-count {
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 12px;
    color: #999;
  }
}

/* 单选按钮组 */
.radio-group {
  display: flex;
  gap: 30px;

  .radio-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;

    .radio-circle {
      width: 20px;
      height: 20px;
      border: 2px solid #ddd;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .radio-dot {
        width: 10px;
        height: 10px;
        background-color: #4caf50;
        border-radius: 50%;
      }
    }

    .radio-content {
      display: flex;
      flex-direction: column;

      .radio-text {
        font-size: 16px;
        color: #333;
        font-weight: 500;
        margin-bottom: 2px;
      }

      .radio-desc {
        font-size: 12px;
        color: #666;
      }
    }

    &.active {
      .radio-circle {
        border-color: #4caf50;
      }

      .radio-content .radio-desc {
        color: #4caf50;
      }
    }
  }
}

/* 数字步进器 */
.stepper-container {
  display: flex;
  align-items: center;
  gap: 20px;

  .stepper-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f8f8;

    .stepper-text {
      font-size: 20px;
      color: #666;
      font-weight: 500;
    }

    &:active {
      background-color: #e8e8e8;
    }
  }

  .stepper-value {
    font-size: 24px;
    color: #333;
    font-weight: 500;
    min-width: 40px;
    text-align: center;
  }
}

/* 下拉选择器 */
.dropdown-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 0 15px;
  cursor: pointer;

  .dropdown-text {
    font-size: 16px;
    color: #333;
  }

  .dropdown-arrow {
    font-size: 12px;
    color: #999;
  }

  &:active {
    background-color: #e8e8e8;
  }
}

/* 添加绘本集按钮 */
.add-bookset-btn {
  width: 100%;
  height: 50px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;

  &:active {
    background-color: #0056cc;
  }

  &.error {
    border: 2px dashed #ff4d4f;
    background-color: #fff1f0;
    color: #ff4d4f;
  }

  .btn-icon {
    font-size: 18px;
    font-weight: bold;
    margin-right: 8px;
  }
}

/* 已选绘本集列表 */
.selected-booksets {
  margin-top: 15px;

  .custom-plan-tip {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;

    .tip-text {
      color: white;
      font-size: 14px;
      font-weight: 500;
    }
  }

  .bookset-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 8px;
    position: relative;

    &.custom-item {
      border-left: 4px solid #667eea;
      background-color: #fff;
      box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
    }

    .bookset-cover {
      width: 40px;
      height: 40px;
      border-radius: 6px;
      margin-right: 12px;
      background-color: #e9ecef;
    }

    .bookset-info {
      flex: 1;
      display: flex;
      flex-direction: column;

      .bookset-title {
        font-size: 14px;
        color: #333;
        font-weight: 500;
        margin-bottom: 4px;
      }

      .bookset-count {
        font-size: 12px;
        color: #666;
      }

      .order-info {
        margin-top: 4px;

        .order-text {
          font-size: 12px;
          color: #667eea;
          background: rgba(102, 126, 234, 0.1);
          padding: 2px 8px;
          border-radius: 10px;
          display: inline-block;
        }
      }
    }

    .sort-controls {
      display: flex;
      flex-direction: column;
      margin-right: 12px;
      gap: 4px;

      .sort-btn {
        width: 28px;
        height: 28px;
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;

        &:not(.disabled):active {
          background: #667eea;
          border-color: #667eea;

          .sort-icon {
            color: white;
          }
        }

        &.disabled {
          background: #f8f9fa;
          border-color: #e9ecef;
          opacity: 0.5;

          .sort-icon {
            color: #adb5bd;
          }
        }

        .sort-icon {
          font-size: 14px;
          color: #667eea;
          font-weight: bold;
        }
      }
    }

    .remove-btn {
      width: 20px;
      height: 20px;
      background-color: #ff4d4f;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: bold;
      cursor: pointer;

      &:active {
        background-color: #d9363e;
      }
    }
  }
}

/* 系统提示 */
.system-tips {
  margin-top: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;

  .tips-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #e9ecef;
    cursor: pointer;

    .tips-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }

    .tips-toggle {
      font-size: 14px;
      color: #007aff;
    }
  }

  .tips-content {
    padding: 15px;

    .tips-text {
      font-size: 14px;
      color: #666;
      line-height: 1.6;
      white-space: pre-line;
    }
  }
}

/* 底部操作按钮 */
.bottom-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background-color: #fff;
  border-top: 1px solid #f0f0f0;
  display: flex;
  gap: 15px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);

  .reset-btn {
    width: 30%;
    height: 40px;
    background-color: #f5f5f5;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 500;
    line-height: 40px;

    &:active {
      background-color: #e8e8e8;
    }
  }

  .save-preview-btn {
    flex: 1;
    height: 40px;
    background-color: #007aff;
    color: #fff;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s;
    line-height: 40px;

    &.disabled {
      background-color: #ccc;
      color: #999;
    }

    &:not(.disabled):active {
      background-color: #0056cc;
      transform: scale(0.98);
    }
  }
}

/* 封面预览 */
.cover-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;

  .cover-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background-color: #e9ecef;
  }

  .cover-tip {
    font-size: 12px;
    color: #6c757d;
    flex: 1;
  }
}
</style>
